<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{consumerCount}}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{songCount}}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{singerCount}}</div>
              <div>歌手总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-center">
              <div class="grid-num">{{songListCount}}</div>
              <div>歌单总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">用户性别比例</h3>
          <div style="background-color: white">
            <ve-pie :data="consumerSex" :theme="options"/>
          </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">歌单类型分布</h3>
        <div style="background-color:white">
          <ve-histogram :data="songStyle"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">歌手性别比例</h3>
        <div style="background-color:white">
          <ve-pie :data="singerSex"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">歌手国籍分布</h3>
        <div style="background-color:white">
          <ve-histogram :data="country" :theme="options1"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getAllConsumer, getAllSinger, getAllsongList, getAllSong,
  getConsumerBySex, getSongByStyle, getSingerBySex, getSingerByCountry} from '../api'

export default {
  name: 'InfoPage',
  data() {
    return {
      consumerCount: 0,
      songCount: 0,
      singerCount: 0,
      songListCount: 0,
      consumer: [],
      consumerSex: {
        columns: ['sex', 'num'],
        rows: [
          // {'性别': '男', '总数': 0},
          // {'性别': '女', '总数': 0}
        ]
      },
      options: {
        color: ['#87ceeb', '#ffc0cb']
      },
      songStyle: {
        columns: ['style', '总数'],
        rows: []
      },
      singerSex: {
        columns: ['sex', 'num'],
        rows: [
          // {'性别': '女', '总数': 0},
          // {'性别': '男', '总数': 0},
          // {'性别': '组合', '总数': 0},
          // {'性别': '不明', '总数': 0}
        ]
      },
      country: {
        columns: ['country', '总数'],
        rows: [
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.getConsumerCount()
    this.getSingerCount()
    this.getSongCount()
    this.getSongListCount()

    this.setConsumerBySex()
    this.setSongByStyle()
    this.setSingerBySex()
    this.setSingerByCountry()
  },
  methods: {
    setConsumerBySex() {
      getConsumerBySex().then(res => {
        this.consumerSex.rows = res.data
      })
    },
    setSongByStyle() {
      getSongByStyle().then(res => {
        this.songStyle.rows = res.data
      })
    },
    setSingerBySex() {
      getSingerBySex().then(res => {
        this.singerSex.rows = res.data
      })
    },
    setSingerByCountry() {
      getSingerByCountry().then(res => {
        this.country.rows = res.data
      })
    },
    // setSex(sex, consumer) {
    //   let count = 0
    //   for (let item of consumer) {
    //     if (sex === item.sex) {
    //       count++
    //     }
    //   }
    //   return count
    // },
    // getByStyle(style) {
    //   for (let item of this.songStyle.rows) {
    //     if (style.includes(item['风格'])) {
    //       item['总数']++
    //     }
    //   }
    // },
    // getByCountry(location) {
    //   for (let item of this.country.rows) {
    //     if (location.includes(item['国籍'])) {
    //       item['总数']++
    //     }
    //   }
    // },
    getConsumerCount() {
      getAllConsumer().then(res => {
        this.consumer = res.data
        this.consumerCount = res.data.length
      })
    },
    getSongCount() {
      getAllSong().then(res => {
        this.songCount = res.data.length
      })
    },
    getSingerCount() {
      getAllSinger().then(res => {
        this.singerCount = res.data.length
        /*        this.singerSex.rows[0]['总数'] = this.setSex(0, res.data)
        this.singerSex.rows[1]['总数'] = this.setSex(1, res.data)
        this.singerSex.rows[2]['总数'] = this.setSex(2, res.data)
        this.singerSex.rows[3]['总数'] = this.setSex(3, res.data)
        for (let item of res.data) {
          this.getByCountry(item.location)
        } */
      })
    },
    getSongListCount() {
      getAllsongList().then(res => {
        this.songListCount = res.data.length
        // for (let item of res.data) {
        //   this.getByStyle(item.style)
        // }
      })
    }
  }
}
</script>

<style scoped>
  .grid-content{
    display: flex;
    align-items: center;
    height: 50px;
  }

  .grid-content-center{
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: darkgray;
  }

  .grid-num{
    font-size: 30px;
    font-weight: bold;
  }
</style>
